<template>
    <div v-if="objectIsNotEmpty(order_detail)">
        <el-tabs v-model="activeName" v-loading="loading">
            <el-tab-pane label="订单信息" name="order_info"></el-tab-pane>
            <!-- <el-tab-pane label="车辆及电池信息" name="car_info"></el-tab-pane> -->
            <el-tab-pane label="充电信息" name="charging_info" :lazy="true"></el-tab-pane>
            <el-tab-pane label="收费标准" name="charges"></el-tab-pane>
            <el-tab-pane label="订单轨迹" name="order_track"></el-tab-pane>
            <!-- <el-tab-pane label="账单明细" name="billing_details"></el-tab-pane> -->
        </el-tabs>
        <Info v-if="activeName == 'order_info'" :order_detail="order_detail" />
        <!-- <Car v-if="activeName == 'car_info'" :order_detail="order_detail"/> -->
        <Charging  v-if="activeName == 'charging_info'" :order_detail="order_detail"/>
        <Charges v-if="activeName == 'charges'" :order_detail="order_detail"/>
        <Track v-if="activeName == 'order_track'" :order_detail="order_detail"/>
        <!-- <Billing v-if="activeName == 'billing_details'" :order_detail="order_detail"/> -->
    </div>
    <div v-else v-loading="loading" style="min-height: 200px;"></div>
</template>

<script>
  import * as api from "@/api/user/consumer";
  import Info from "@/components/Common/order/components/Info";
  import Car from "@/components/Common/order/components/Car";
  import Charging from "@/components/Common/order/components/Charging";
  import Charges from "@/components/Common/order/components/Charges";
  import Track from "@/components/Common/order/components/Track";
  import Billing from "@/components/Common/order/components/Billing";
  import {objectIsNotEmpty} from "@/utils/ruoyi"
  export default {
    name: 'Order',
    components: { Info,Car,Charging,Charges,Track,Billing },
    props: {
      order_id: {
         type: [String,Number]
      },
    },
    data() {
      return {
        loading:false,
        activeName:'order_info',
        order_detail:{},
      };
    },
    mounted(){
      this.getData()
    },
    methods: {
      objectIsNotEmpty,
      getData(){
        this.loading = true
        api.getOrderDetail(this.order_id).then(response => {
          this.order_detail = response.data || {};
          this.loading = false
        });
      }
    }
  }
</script>

<style lang="scss" scoped>

</style>
